/**
 * @Author:marina
 * @Date: 2025-02-18 10:22:23 
 * @Description:div+css炫彩泡泡登录页面
 */

<template>
    <div class="animate-bubble-chart">
        <div class="text-container">
            <el-image
                :src="url"
                fit="cover"
            />
            <el-form
                :model="form"
                label-width="auto"
                style="max-width: 600px"
            >
                <el-form-item>
                    <el-text class="form_title">美信智能运维系统</el-text>
                </el-form-item>

                <el-form-item>
                    <el-input
                        v-model="form.account"
                        :prefix-icon="User"
                        :placeholder="currentPlaceholder1"
                        @focus="handleFocus(1)"
                        @blur="handleBlur(1)"
                    />
                </el-form-item>

                <el-form-item>
                    <el-input
                        v-model="form.password"
                        :prefix-icon="Lock"
                        :placeholder="currentPlaceholder2"
                        @focus="handleFocus(2)"
                        @blur="handleBlur(2)"
                        show-password
                        type="password"
                    >
                    </el-input>
                </el-form-item>

                <el-form-item v-if="isShowVerifyCode">
                    <el-input
                        v-model="form.verifyCode"
                        :prefix-icon="Message"
                        :placeholder="currentPlaceholder3"
                        @focus="handleFocus(3)"
                        @blur="handleBlur(3)"
                    >
                        <template #suffix>
                            <span
                                class="form_verifyCode"
                                @click="freshVerifyCode"
                                title="点击更换验证码"
                            >{{ randomCode }}</span>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <!-- <el-text class="form_changePwd">修改密码？</el-text> -->

                    <el-icon class="form_tool">
                        <el-tooltip
                            content="工具箱"
                            placement="left"
                            effect="light"
                        >
                            <Suitcase @click="chooseTool" />
                        </el-tooltip>
                    </el-icon>

                </el-form-item>

                <el-form-item>
                    <el-button
                        type="primary"
                        class="form_login"
                    >登录</el-button>
                </el-form-item>


                <el-text class="form_info">美信有限公司提供技术支持 版本号v1.0.0</el-text>
            </el-form>
        </div>

        <div class="gradient-bg">
            <svg xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <filter id="goo">
                        <feGaussianBlur
                            in="SourceGraphic"
                            stdDeviation="10"
                            result="blur"
                        />
                        <feColorMatrix
                            in="blur"
                            mode="matrix"
                            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8"
                            result="goo"
                        />
                        <feBlend
                            in="SourceGraphic"
                            in2="goo"
                        />
                    </filter>
                </defs>
            </svg>
            <div class="gradients-container">
                <div class="g1"></div>
                <div class="g2"></div>
                <div class="g3"></div>
                <div class="g4"></div>
                <div class="g5"></div>
                <div class="interactive"></div>
            </div>
        </div>
    </div>
</template>

<script setup name="animate-bubble-chart" lang="ts">
import { User, Lock, Suitcase, Message } from '@element-plus/icons-vue';
import { ref } from 'vue';

let form = ref({
    account: '',
    password: '',
    verifyCode: ''
});

let url = 'src/assets/imgs/水母.jpg';

let currentPlaceholder1 = ref('请输入账户');
let currentPlaceholder2 = ref('请输入账户');
let currentPlaceholder3 = ref('请输入验证码');
const handleFocus = (val: number) => {
    // 获取焦点时隐藏 placeholder
    switch (val) {
        case 1:
            currentPlaceholder1.value = "";
            break;
        case 2:
            currentPlaceholder2.value = "";
            break;
        case 3:
            currentPlaceholder3.value = "";
            break;
    }
}
const handleBlur = (val: number) => {
    // 失去焦点时恢复原始 placeholder
    switch (val) {
        case 1:
            currentPlaceholder1.value = "请输入账户";
            break;
        case 2:
            currentPlaceholder2.value = "请输入密码";
            break;
        case 3:
            currentPlaceholder3.value = "请输入验证码";
            break;
    }
}
// 选择工具箱
const chooseTool = () => {
    console.log('选择工具箱');
}

// 验证码
let randomCode = ref(authCode());
let isShowVerifyCode = import.meta.env.VITE_VERIFY_CODE;
async function freshVerifyCode() {
    randomCode.value = Math.random().toString(36).slice(-4);
}

function authCode (): any {
   return Math.random().toString(36).slice(-4);
}
</script>

<style lang="less" scoped>
@import url(./css/AnimateBubbleChart.css);

.animate-bubble-chart {
    --color-bg1: rgb(108, 0, 162);
    --color-bg2: rgb(0, 17, 82);
    --color1: 18, 113, 255;
    --color2: 221, 74, 255;
    --color3: 100, 220, 255;
    --color4: 200, 50, 50;
    --color5: 180, 180, 50;
    --color-interactive: 140, 100, 255;
    --circle-size: 80%;
    --blending: hard-light;

    // font-family: "Dongle", sans-serif;

    margin: 0;
    padding: 0;

    .text-container {
        z-index: 100;
        width: 700px;
        height: 450px;
        display: flex;
        position: absolute;
        right: calc(50% - 350px);
        top: calc(50% - 225px);
        justify-content: center;
        color: white;
        opacity: 0.8;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        .el-image {
            width: 100%;
            height: 100%;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .el-input {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 5px;
            // color: white;
            font-size: 16px;
            padding: 10px 15px;
            width: 80%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;

            :deep(.el-input__wrapper) {
                background-color: rgba(255, 255, 255, 0.1);
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                transition: all 0.3s;

                &.is-focus {
                    border-color: transparent;
                    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
                }

                .el-input__inner {
                    color: rgba(255, 255, 255, 0.9);
                    padding-left: 25px;
                    font-size: 15px;
                    transition: all 0.3s;
                }

                .el-input__prefix {
                    color: rgba(255, 255, 255, 0.9);
                    transition: all 0.3s;
                }

                .el-input__suffix {
                    color: rgba(255, 255, 255, 0.9);
                    transition: all 0.3s;

                    .el-input__password {
                        color: rgba(255, 255, 255, 0.9);
                    }
                }
            }

            ::-webkit-input-placeholder {
                color: rgba(255, 255, 255, 0.7);
                transition: all 0.3s;
            }


        }

        .el-form {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;

            .el-form-item {
                margin-bottom: 16px;

                :deep(.el-form-item__content) {
                    justify-content: space-around;
                }

                .form_title {
                    color: white;
                    font-size: 24px;
                    font-weight: bold;
                    display: block;
                    margin-top: 20px;
                    margin-bottom: 40px;
                }

                .form_changePwd {
                    color: white;
                    cursor: pointer;
                    font-size: 14px;
                    text-align: right;
                    display: block;
                    margin-top: 10px;
                    transition: all 0.3s;
                    text-decoration: underline;
                    width: 80%;
                    float: right;

                    &:hover {
                        color: rgba(255, 255, 255, 0.7);
                    }
                }

                .form_tool {
                    color: white;
                    cursor: pointer;
                    font-size: 20px;
                    text-align: right;
                    display: block;
                    margin-top: 10px;
                    transition: all 0.3s;
                    text-decoration: underline;
                    width: 80%;
                    float: right;

                    &:hover {
                        color: rgba(255, 255, 255, 0.7);
                    }
                }

                .form_login {
                    background: rgba(255, 255, 255, 0.1);
                    border: none;
                    border-radius: 5px;
                    color: white;
                    font-size: 16px;
                    padding: 10px 15px;
                    width: 80%;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                    cursor: pointer;
                    transition: all 0.3s;
                    text-align: center;
                    letter-spacing: 5px;

                    &:hover {
                        background: rgba(255, 255, 255, 0.2);
                        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
                    }

                    &:active {
                        background: rgba(255, 255, 255, 0.3);
                        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
                    }
                }

                .form_verifyCode {
                   width: 60px;
                   height: 38px;
                   line-height: 38px;
                   color: #fff;
                   cursor: pointer;
                   user-select: none;
                //    letter-spacing: 5px;
                   text-indent: 5px;
                   text-shadow: 2px 2px 5px #222;
                   text-decoration: underline;
                }
            }
        }

        .form_info {
            color: rgba(255, 255, 255, 0.5);
            font-size: 10px;
            transition: all 0.3s;
            width: 200px;
            font-family: sans-serif;
            position: absolute;
            bottom: 10px;
            right: 58%;
            // right: calc(50% - 100px);
        }
    }

    @-webkit-keyframes moveInCircle {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes moveInCircle {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes moveVertical {
        0% {
            transform: translateY(-50%);
        }

        50% {
            transform: translateY(50%);
        }

        100% {
            transform: translateY(-50%);
        }
    }

    @keyframes moveVertical {
        0% {
            transform: translateY(-50%);
        }

        50% {
            transform: translateY(50%);
        }

        100% {
            transform: translateY(-50%);
        }
    }

    @-webkit-keyframes moveHorizontal {
        0% {
            transform: translateX(-50%) translateY(-10%);
        }

        50% {
            transform: translateX(50%) translateY(10%);
        }

        100% {
            transform: translateX(-50%) translateY(-10%);
        }
    }

    @keyframes moveHorizontal {
        0% {
            transform: translateX(-50%) translateY(-10%);
        }

        50% {
            transform: translateX(50%) translateY(10%);
        }

        100% {
            transform: translateX(-50%) translateY(-10%);
        }
    }

    .gradient-bg {
        width: 100%;
        height: 97vh;
        position: relative;
        overflow: hidden;
        background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
        top: 0;
        left: 0;
    }

    .gradient-bg svg {
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
    }

    .gradient-bg .gradients-container {
        filter: url(#goo) blur(40px);
        width: 100%;
        height: 100%;
    }

    .gradient-bg .g1 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: center center;
        -webkit-animation: moveVertical 30s ease infinite;
        animation: moveVertical 30s ease infinite;
        opacity: 1;
    }

    .gradient-bg .g2 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: calc(50% - 400px);
        animation: moveInCircle 20s reverse infinite;
        opacity: 1;
    }

    .gradient-bg .g3 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2 + 200px);
        left: calc(50% - var(--circle-size) / 2 - 500px);
        transform-origin: calc(50% + 400px);
        -webkit-animation: moveInCircle 40s linear infinite;
        animation: moveInCircle 40s linear infinite;
        opacity: 1;
    }

    .gradient-bg .g4 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: var(--circle-size);
        height: var(--circle-size);
        top: calc(50% - var(--circle-size) / 2);
        left: calc(50% - var(--circle-size) / 2);
        transform-origin: calc(50% - 200px);
        -webkit-animation: moveHorizontal 40s ease infinite;
        animation: moveHorizontal 40s ease infinite;
        opacity: 0.7;
    }

    .gradient-bg .g5 {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: calc(var(--circle-size) * 2);
        height: calc(var(--circle-size) * 2);
        top: calc(50% - var(--circle-size));
        left: calc(50% - var(--circle-size));
        transform-origin: calc(50% - 800px) calc(50% + 200px);
        -webkit-animation: moveInCircle 20s ease infinite;
        animation: moveInCircle 20s ease infinite;
        opacity: 1;
    }

    .gradient-bg .interactive {
        position: absolute;
        background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
        mix-blend-mode: var(--blending);
        width: 100%;
        height: 100%;
        top: -50%;
        left: -50%;
        opacity: 0.7;
    }
}
</style>